<template>
    <view class="wrap">
        <u-navbar :is-back="false" title-color="#ffffff" title="首页" :background="background"></u-navbar>
        <u-sticky offset-top="120">
            <view >
                <i-video :video="video"></i-video>
            </view>
        </u-sticky>
        <view class="u-demo-two">
            <view class="u-demo-wrap">
                <view class="u-demo-area">
                    <u-toast ref="uToast"></u-toast>
                    <view class="container u-skeleton">
                        <!-- <view class="userinfo"> -->
                            <!-- <block> -->
                                <!--u-skeleton-circle 绘制圆形-->
                                <!-- <image class="userinfo-avatar u-skeleton-circle" shape="circle" :src="userInfo.avatarUrl"></image> -->
                                <!--u-skeleton-fillet 绘制圆角矩形-->
                                <!-- <text class="u-skeleton-fillet">{{userInfo.nickName}}</text> -->
                            <!-- </block> -->
                        <!-- </view> -->
                        <view style="margin: 20px 0">
                            <!--u-skeleton-rect 绘制矩形-->
                            <view class="u-skeleton-rect lists" u-skeleton>
                                <u-parse :html="lists" :show-with-animation="true"></u-parse>
                            </view>
                        </view>
                    </view>
                    <!--引用组件骨架屏-->
                    <u-skeleton bg-color="rgb(250, 250, 250)" :loading="loading" :animation="animation"
                                :el-color="elColor" :border-radius="borderRadius"></u-skeleton>
                </view>
            </view>



        </view>
        <!--公司简介-->
        <view class="u-demo-two" style="padding-top: 10px">
            <view class="u-demo-wrap-conmany">
                <view class="u-demo-area">
                    <view class="container u-skeleton">

                        <view style="margin: 20px 0">
                            <!--u-skeleton-rect 绘制矩形-->
                            <view class="u-skeleton-rect lists" >
                                <u-parse :html="listsTwo" :show-with-animation="true"></u-parse>
                            </view>
                        </view>
                    </view>

                </view>
            </view>



        </view>
        <u-gap height="70"></u-gap>
        <!--返回顶部-->
        <u-back-top :scrollTop="scrollTop" :mode="mode"
                    :bottom="bottom" :right="right" :top="top" :icon="icon" :custom-style="customStyle"
                    :icon-style="iconStyle" :tips="tips"
        >
        </u-back-top>
        <i-tabbar></i-tabbar>
    </view>

</template>

<script>
    import tabbar from  'pages/shops/tabbar/index'
    import list from "./components.config.js";
    import Videobox from 'pages/shops/video/index.vue'
    export default {
        components:{
            'i-tabbar':tabbar,
            'i-video':Videobox
        },
        data() {
            return {
                video:[{
                    url:'http://www.cbznkj.cn/img/1615494871231760.mp4',
                }
                ],

                /***回到顶部*/
                scrollTop: 0,
                mode: 'circle',
                bottom: 200,
                right: 40,
                top: 400,
                icon: 'arrow-upward',
                iconStyle: {
                    color: '#f29100',
                    fontSize: '34rpx'
                },
                customStyle: {
                    color: '#f29100',
                },
                tips: '返回',
                /***回到顶部*/
                userInfo: {
                    scrollTop:0,
                    avatarUrl: 'https://cdn.uviewui.com/uview/common/logo.png',
                    nickName: '好吃的米饭不用吃菜'
                },
                lists: '',
                listsTwo: '',
                loading: true, // 是否显示骨架屏组件
                animation: true,
                elColor: '#e5e5e5',
                borderRadius: 10,
                list: list,
                background: {


                    //backgroundColor: '#19be6b',

                    // 导航栏背景图
                     //background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
                    // 还可以设置背景图size属性
                    // backgroundSize: 'cover',

                    // 渐变色
                    backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
                }

                //desc: '众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让你快速集成，开箱即用。',
            }
        },
		onLoad() {

			this.selectTsIntroduceForList()
		},
        computed: {
            getIcon() {
                return path => {
                    return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
                }
            },
            desc() {
                return this.$t('components.desc');
            }
        },
        onShow() {
            uni.setNavigationBarTitle({
                title: this.$t('nav.components')
            });
        },
        created() {

        },
        methods: {
			selectTsIntroduceForList(){
					this.$u.api.selectTsIntroduceForList({
						'introduceKeys':['person','company']
					}).then(res=>{
						console.log(res);
                        this.loading=false;
						res.forEach(item=>{
							//个人寄语
							if(item.introduceKey == 'person'){
								this.lists = item.productIntroduce
							}
							//公司简介
							if(item.introduceKey == 'company'){
								this.listsTwo = item.productIntroduce
							}
						})
					})
			},
            onPageScroll(e) {
                this.scrollTop = e.scrollTop;
            },
            openPage(path) {
                this.$u.route({
                    url: path
                })
            },
            getGroupTitle(item) {
                return this.$i18n.locale == 'zh' ? item.groupName : item.groupName_en
            },
            getFieldTitle(item) {
                return this.$i18n.locale == 'zh' ? item.title : item.title_en
            }
        }

    }
</script>

<style>
    /* page {
        background-color: rgb(240, 242, 244);
    } */
</style>

<style lang="scss" scoped>
    .wrap {
        height: 200vh;
    }
    .u-cell-icon {
        width: 36rpx;
        height: 36rpx;
        margin-right: 8rpx;
    }
    .container {
        text-align: left;
        font-size: 28rpx;
        color: $u-content-color;
    }

    .userinfo {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .userinfo-avatar {
        width: 128rpx;
        height: 128rpx;
        margin: 20rpx;
        border-radius: 50%;
    }

    .lists {
        margin: 10px 0;
    }
    .u-demoTwo{
        padding-top: 10rpx;
    }
</style>
